<template>
		<view class="non-urgent-service">
			<!-- 订单信息 -->
			<view v-if="!isOrder">
				<view class="order-info">
					<view class="section-title">我的订单</view>
					<view class="shop-name">
						<text>{{shopName}}</text>
						<view class="phoneClass" @tap="contactService(service)">
							<u-icon name="phone" color="var(--primary-color)"  size="20"></u-icon>
							<text style="margin-left: 3px;">联系商家</text>
						</view>
					</view>
					<view class="problem-description">
						<text class="label">问题描述：</text>
						<text class="description">{{problemDescription}}</text>
					</view>
					
					<!-- 上传图片 -->
					<view class="upload-section">
						<text class="label">上传图片：</text>
						<view class="image-preview">
							<u--image
							class="preview-image"
							    :showLoading="true"
							    v-for="(img, index) in images" :key="index" :src="img"
							    width="100%"
							    height="100%"
							    @click="click"
							  ></u--image>
				
						</view>
					</view>
				</view>
				
				<!-- 操作按钮 -->
				<view class="action-buttons">
					<button class="btn cancel" @click="cancelOrder">取消订单</button>
					<button class="btn confirm" @click="confirmOrder">等待确认</button>
				</view>
			</view>
			<view v-if="isOrder">
				<!-- 地图区域 -->
				<view class="map-container">
					<map
						id="googleMap"
						:latitude="mapLatitude"
						:longitude="mapLongitude"
						:scale="scale"
						:markers="markers"
						:controls="controls"
						show-location
						@controltap="onControlTap"
						@regionchange="onRegionChange"
					></map>
				</view>
				
				<!-- 附近服务 -->
				<view class="service-list">
					<u-row justify="between" >
						<view class="service-title">
							<u-slider v-model="value" min="30" max="80"></u-slider>{{value}}
						</view>
						<view>
							<select style="margin-left: 10px;" v-model="selectedValue">
							  <option v-for="item in options" :value="item">{{ item }}</option>
							</select>
							<select style="margin-left: 10px;" v-model="selectedValue">
							  <option v-for="item in options" :value="item">{{ item }}</option>
							</select>
						</view>
						<!-- <view>
							<u-picker :show="show" :columns="columns"></u-picker>
							<u-button @click="show = true">打开</u-button>
						</view> -->
					</u-row>
					<view class="item-box">
						<view
							v-for="(service, index) in services"
							:key="index"
							class="service-item"
						>
							<view @click="orderClick">
								<view class="service-info">
									<view class="name-box">
										<text class="service-name">{{ service.name }}</text>
										<text class="service-type">{{ service.type }}</text>
									</view>
									<view>
										<u-row justify="start">
											<u-rate count="5" v-model="service.value" active-color='var(--primary-color)' gutter="0" size="14"></u-rate>
											<text class="service-mark">{{service.value}}.0</text>
										</u-row>
									</view>
								</view>
								<view class="price-box">
									<view class="service-price">
										<u-icon name="map" color="var(--primary-color)"  size="15" style="margin-right: 3px;"></u-icon>
										{{ service.address }}
									</view>
									<text class="service-distance">{{ service.distance }}km</text>
								</view>
								<view class="service-actions">
									<view class="tagList">
										<u-tag class="tagItem" text="维修" type="warning" plain size="mini"></u-tag>
										<u-tag class="tagItem" text="钣喷" type="success" plain size="mini"></u-tag>
									</view>
									<!-- <view class="phoneClass" @tap="contactService(service)">
										<u-icon name="phone" color="var(--primary-color)"  size="20"></u-icon>
										<text style="margin-left: 3px;">联系商家</text>
									</view> -->
								</view>
													
							</view>
						</view>
					</view>
				</view>
			</view>
			
		</view>
</template>
<script>
export default {
  data() {
    return {
			selectedValue:'选项1',
			options: ['选项1', '选项2', '选项3'],
			show: false,
			columns: [
					['中国', '美国', '日本']
			],
			isOrder:false,
      services: [
        // 服务商列表
        {
          name: 'XXXXXX',
          type: 'MC',
          address: '钱塘区下沙月雅路206-210号',
          distance: 20.21,
					value:2
        },
        {
          name: 'XXXXXX',
          type: 'MC',
          address: '钱塘区下沙月雅路206-210号',
          distance: 20.31,
					value:5
        },
				{
				  name: 'XXXXXX',
				  type: 'MC',
				  address: '钱塘区下沙月雅路206-210号',
				  distance: 20.31,
					value:3
				},
				{
				  name: 'XXXXXX',
				  type: 'MC',
				  address: '钱塘区下沙月雅路206-210号',
				  distance: 20.31,
					value:4
				},
      ],
			userInfo: {
				name: '',
				isMember: false
			},
			shopName: "xxxxxxx店", // 店铺名称
			problemDescription: "xxxxxxxxxxxxxx", // 问题描述
			images: [
				"https://uviewui.com/album/1.jpg",
				"https://uviewui.com/album/1.jpg",
				"https://uviewui.com/album/1.jpg",
				"https://uviewui.com/album/1.jpg",
			], // 上传的图片
			contactInfo: "" ,// 联系方式
			value:"66",
			// 地图基础配置
			mapLatitude: 31.230416,
			mapLongitude: 121.473701,
			scale: 14, // 初始缩放级别（3-20）
			
			// 地图控制器
			controls: [{
				id: 11,
				iconPath: '/static/zoom-in.png',
				position: { left: 10, top: 100, width: 30, height: 30 }
			}, {
				id: 12,
				iconPath: '/static/zoom-out.png',
				position: { left: 10, top: 140, width: 30, height: 30 }
			}],
			
			// 标记点
			markers: [{
				id: 1,
				latitude: 31.230416,
				longitude: 121.473701,
				title: "当前位置",
				// iconPath: '/static/location-pin.png'
			}]
		};
  },
	onLoad() {
		// 从缓存加载用户信息
		this.loadUserInfo();
	},
	onReady() {
	  this.updateMap();
	},
	mounted() {
	},
  methods: {
		cancelOrder(){
			this.isOrder=true
		},
		confirmOrder(){
			
		},
		orderClick(){
			uni.navigateTo({
				// url: `/pages/order/detail?orderId=${orderId}`
				url: `/pages/order/detail/index`
			})
		},
		 // 加载用户数据
		loadUserInfo() {
			const info = uni.getStorageSync('userInfo') || {};
			this.userInfo = {
				name: info.name || '新',
				isMember: info.membership === 'vip' // 根据实际字段调整
			};
		},
	
    onMarkerTap(e) {
      console.log('点击了地图标记：', e.markerId);
    },
		
		
		// 缩放控制
		  onControlTap(e) {
		    const controlId = e.controlId;
		    if (controlId === 1) {
		      this.scale = Math.min(this.scale + 1, 20); // 放大
		    } else if (controlId === 2) {
		      this.scale = Math.max(this.scale - 1, 3); // 缩小
		    }
		    this.updateMap();
		  },
		  
		  // 地图区域变化监听
		  onRegionChange(e) {
		    if (e.type === 'end') {
		      this.mapContext.getCenterLocation({
		        success: res => {
		          this.mapLatitude = res.latitude;
		          this.mapLongitude = res.longitude;
		        }
		      });
		    }
		  },
		  
		  // 更新地图
		  updateMap() {
		    this.mapContext = uni.createMapContext('googleMap', this);
		    this.mapContext.moveToLocation();
		  },
			
			
			
    contactService(service) {
      console.log('联系商家：', service.name);
      uni.makePhoneCall({
        phoneNumber: '123456789', // 示例电话号码
      });
    },
    navigateTo(page) {
      console.log('跳转到：', page);
      uni.navigateTo({
        url: `/pages/tabbar/${page}/${page}`, // 示例路径
      });
    },
	
  },
};
</script>
<style scoped lang="scss">
.map-container {
	height: 200px;
	background-color: #eaeaea;
}
.order-info {
	background-color: white;
	border-radius: 12rpx;
	padding: 30rpx;
	margin-top: 20rpx;
	.section-title {
		font-size: 30rpx;
		margin-bottom: 20rpx;
	}
	.shop-name {
		font-size: 30rpx;
		color: #666;
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
	}
	
	.problem-description {
		margin-bottom: 30rpx;
	}
	
	.label {
		font-size: 28rpx;
		color: #666;
		margin-right: 10rpx;
	}
	
	.description {
		font-size: 28rpx;
		color: #333;
	}
	
	.upload-section {
		margin-bottom: 30rpx;
	}
	
	.image-preview {
		display: flex;
		flex-wrap: wrap;
		margin-top: 20rpx;
		.preview-image {
			width: 190rpx;
			height: 190rpx;
			margin-right: 15rpx;
			margin-bottom: 15rpx;
			border-radius: 8rpx;
			.u-image{
				width:100%;
			}
		}
	}
}
.action-buttons {
	  display: flex;
	  justify-content: right;
	  margin-top: 40rpx;
		.btn {
		  margin: 0 15rpx;
		  border-radius: 50rpx;
		  font-size: 14px;
			padding: 0 20px;
		}
		.cancel {
		  background-color: #f8f8f8;
		  color: #666;
		  border: 1rpx solid #ddd;
		}
		.confirm {
		  color: var(--primary-color);
			border: 1px solid var(--primary-color);
		}
	}
.service-list {
  padding: 1rem;
	.service-title {
		display: flex;
		justify-content: start;
		align-items: center;
	  font-size: 0.9rem;
	  color: var(--text-color-b);
		.u-slider{
			width: 130px;
		}
	}
	.item-box{
		height:45vh;
		overflow: auto;
	}
	.service-item {
		
	  padding: 1rem 0;
	  margin-bottom: 0.8rem;
	  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	}
	.service-info {
	  display: flex;
	  justify-content: space-between;
	  margin-bottom: 10px;
		.service-name {
			font-size: 1rem;
			color: var(--text-color-b);
		}
		.service-type {
		  font-size: 0.6rem;
			color: #fff;
			padding:2px 5px ;
			margin-left: 10px;
			border-radius: 10px;
			background-color:var(--primary-color) ;
		}
		.service-star{
			color: var(--primary-color);
			font-size: 14px;
			margin-right: 2px;
		}
		.service-mark{
			margin-left: 10px;
			font-size: 0.8rem;
			color: var(--primary-color);
		}
	}
	.price-box{
		color:  var(--text-color-g);
		display: flex;
		justify-content:space-between;
		padding: 2px;
		margin-bottom: 6px;
		font-size: 0.9rem;
		color: var(--text-color-g);
		.service-price{
			display: flex;
			justify-content: start;
		}
	}
	.service-actions {
	  display: flex;
	  justify-content: space-between;
	}
	.phoneClass{
		color: var(--text-color-g);
		font-size: 0.9rem;
		display: flex;
		align-items: center;
	}
	.service-actions>view{
		display: flex;
		justify-content: center;
	}
	.service-actions .tagList{
		margin-top: 5px;
	}
	.service-actions .tagList .tagItem{
		margin-right: 5px;
	}
}
</style>
